<template>
  <div class="dot-wrapper" v-if="hasDot">
    <div class="dot-item" v-for="(item,index) of itemLen" :key="index">
      <a
        class="dot-lk"
        href="javascript:;"
        @click="dotClick(index)"
        :style="{backgroundColor:(item-1) === currentIndex ? dotBgColor:'#d5d5d5'}"
      ></a>
    </div>
  </div>
</template>

<script>
export default {
    name: "CarDot",
    props:{
        currentIndex:Number,
        itemLen:Number,
        hasDot:Boolean,
        dotBgColor: {
            type: String,
            default: 'red'
        }
    },setup(props,ctx){
        const dotClick = (index)=>{
            var arr = new Array();
            arr['index'] = index;
            if(props.currentIndex>index){
                arr['dir'] = 'prev';
            }else if(props.currentIndex<index){
                arr['dir'] = 'next';
            }
            ctx.emit("dotClick",arr);
        }

        return{
            dotClick
        }
    }
}
</script>

<style lang="scss" scoped>
.dot-wrapper {
  position: absolute;
  z-index: 3;
  text-align: center;
  font-size: 0;
  width: 100%;
  height: 13px;
  bottom: -30px;

  .dot-item {
    display: inline-block;
    margin: 3px;

    .dot-lk {
      display: block;
      width: 14px;
      height: 4px;
      border-radius: 2px;
      background-color: #d5d5d5;
      margin: 0 4px;
      cursor: pointer;
    }
  }
}
</style>